<template>
    <div class="container" v-loading="loading">
        <el-form ref="form" :model="form" label-width="100px" size="mini">
            <el-form-item label="表格名称">
                <el-input v-model="form.bgmc" disabled></el-input>
            </el-form-item>
            <el-form-item label="内容描述">
                <el-input type="textarea" disabled v-model="form.nrms" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
            </el-form-item>
            <el-form-item label="截止日期">
                <el-input v-model="form.tbjzrq" disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="表格附件">
                <div class="uploadBox">
                    <span class="undertxt" style="margin-right:20px;" v-if="fileName!=''">{{fileName}}</span>
                    <el-button v-if="fileName!=''" type="primary" size="mini" @click="downExcel()">下载</el-button>
                    <!-- <el-upload class="upload-demo" ref="upload" :before-upload="beforeUpload" action :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
                        <el-button size="mini" type="primary">导入</el-button>
                    </el-upload> -->
                </div>

            </el-form-item>
            <el-form-item label="下发对象">
                <!-- <div>
                    <el-button size="mini" type="primary" @click="getqueryXfdx()">默认对象</el-button>
                </div> -->
                <!-- <div class="btnC">
                    <el-button type="danger" size="mini" class="mybtn" @click="delxfdx()"><i class="el-icon-minus"></i></el-button>
                    <el-button type="danger" size="mini" class="mybtn" @click="addxfdx()"><i class="el-icon-plus"></i></el-button>
                </div> -->
                <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="jsdwmc" label="接收单位" align="center">

                    </el-table-column>
                    <el-table-column prop="jsr" label="接收人" align="center">
                    </el-table-column>
                    <el-table-column prop="tbzt" label="填报信息" align="center">
                        <template slot-scope="scope">
                            <div class="tbBox">
                                <span style="display: inline-block;width: 120px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-if="scope.row.fileName !=''">{{scope.row.fileName}}</span>
                                <el-button v-if="scope.row.tbzt=='未填报'" type="primary" size="mini" @click="upload(scope.row)">上传</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="创建时间">
                        <el-input v-model="form.cjrq" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人">
                        <el-input v-model="form.cjr" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit('')">保存</el-button>
                    <el-button type="primary" @click="onSubmit(1)">提交</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-upload style="display:none;" class="upload-demo" ref="upload" :before-upload="beforeUpload" action :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
            <el-button size="mini" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>
// require component
import { queryXfdx, querySwjg, querySwry, add, queryById, sjsb } from '@/api/zcgj/gxbg'

export default {

    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            form: {
                bgmc: '',
                nrms: '',
                tbjzrq: '',
                xfdxList: '',
                cjrq: '',
                cjr: '',


            },
            file: '',
            fileName: '',
            jsdwOption: [],
            jsrOption: [],
            tableData: [],
            tbId: '',
            tbfile: '',
            tbfileName: '',
            docSelect: [],

        }
    },
    mounted() {
        this.getById()
    },
    methods: {
        getById() {
            this.loading = true
            this.tableData = []
            queryById({ id: this.id }).then(res => {
                console.log(res)
                this.loading = false
                this.form = res.data.gxbgSjsc
                this.fileName = res.data.gxbgSjsc.wjmc
                this.tableData = res.data.xfdxList.map(item => {
                    return {
                        ...item, fileName: item.xfdxwjmc
                    }
                })


            })
        },
        onSubmit(flag) {
            if (this.tableData[0].fileName == '') {
                this.$message.error('请上传填报内容')
                return false
            }

            let fd = new FormData();
            if (this.tableData[0].bgxx == '' ||this.tableData[0].bgxx == null) {
                fd.append('file', this.tbfile.file)
            } else {
                fd.append('file', null)
            }

            fd.append('id', this.tableData[0].id)
            fd.append('flag', flag)
            this.loading = true
            sjsb(fd).then(res => {
                this.loading = false
                if (res.code == 200) {
                    if (flag == '1') {
                        this.$message.success('提交成功')
                    } else {
                        this.$message.success('保存成功')
                    }
                    this.go('list')
                } else {
                    this.$message.error('请重新提交')
                }
            })


        },
        upload(row) {
            this.tbId = row.id
            this.$refs['upload'].$refs['upload-inner'].handleClick()
        },

        beforeUpload(file, fileList) {
            if (file.size > 1024 * 1024 * 10) {
                this.$message.warning(
                    "你上传的 \“" + file.name + "\” 文件过大，请上传小于2M的文件。"
                );
                return false;
            }

            if (
                file.name.indexOf("@") != -1 ||
                file.name.indexOf("#") != -1 ||
                file.name.indexOf('""') != -1 ||
                file.name.indexOf("<") != -1 ||
                file.name.indexOf(">") != -1 ||
                file.name.indexOf("?") != -1 ||
                file.name.indexOf("|") != -1 ||
                file.name.indexOf("/") != -1 ||
                file.name.indexOf(":") != -1 ||
                file.name.indexOf("`\`") != -1
            ) {
                this.$message.warning(
                    "你上传的 \“" +
                    file.name +
                    "\” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
                );
                return false;
            }

            let index = file.name.lastIndexOf(".");
            let Type = file.name.substr(index + 1, file.name.length);
            if (["xls", "csv", "xlsx"].indexOf(Type.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为xls,csv,xlsx的附件！",
                });
                return false;
            }
        },
        httpRequest(data) {
            console.log(data)
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tbId == this.tableData[i].id) {
                    this.tableData[i].fileName = data.file.name
                }

            }
            // this.fileName = data.file.name
            this.tbfile = data

        },


        downExcel() {
            var raw = window.atob(this.form.bgfj);
            var uInt8Array = new Uint8Array(raw.length);
            for (var i = 0; i < raw.length; i++) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            const blob = new Blob([uInt8Array], {
                type: "application/msword"
            });


            const elink = document.createElement("a");
            elink.download = this.fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        },







        handleSelectionChange(rows) {
            console.log(rows)
            this.docSelect = rows
        },
        //获取模型指标option
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }
    .btnC {
        text-align: right;
        margin-bottom: 2px;

        .mybtn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            padding: 0;
        }
    }
    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }
}
::v-deep .undertxt {
    color: rgb(64, 158, 255);
    cursor: pointer;

    &:hover {
        text-decoration: underline;
    }
}
.uploadBox {
    display: flex;
    justify-self: start;
}
.tbBox {
    display: flex;
    justify-self: center;
}
</style>